<template>
  <div class="camera">
    <img id="shows" />
  </div>
</template>
<script>
export default {
  props: {
    ws1: String,
    isshow: String
  },
  data() {
    return {
    }
  },
  methods: {
    //init()方法为了初始化ws的一些具体回调函数，在body的onload事件中触发
    init() {
      var ws = {};//初始化ws对象
      var check_ws_online = null;
      var ws_offline = false;
      check_ws_online = setInterval(function () {
        if (ws_offline) {
          clearInterval(check_ws_online);
          init();
        }
      }, 5000);
      var start_time = new Date().getTime();
      //链接服务端
      ws = new WebSocket("ws://" + this.ws1 + ":9080/ws");

      //创建img标签来显示服务端传来的字节数//组
      var img_1 = document.getElementById("shows");

      var img = new Image();
      img.onload = function () {
        img_1.src = img.src;
      }

      //配置客户端连接成功的回调方法
      ws.onopen = function (event) {
        ws_offline = false;
        console.log("open...耶2");
      };

      //配置客户端处理消息的回调方法
      ws.onmessage = function (event) {
        var end_time = new Date().getTime();
        //创建FileReader对象，该对象时html5中的特有对象，详细用法可以//参照html5相关资料
        var reader = new FileReader();

        //设置FileReader对象的读取文件回调方法
        reader.onload = function (eve) {
          //判断文件是否读取完成
          if (eve.target.readyState == FileReader.DONE) {
            //读取文件完成后内容放在this===当前
            var img = document.getElementById("shows");
            //fileReader对象的result属性中，将该内容赋值img标签//浏览器就可以自动解析内容格式并且渲染在浏览器中
            img.src = this.result;
            //将标签添加到id为show的div中否则，即便是有img也看不见
            // document.getElementById("show") = img;
          }
        };

        //调用FileReader的readAsDataURL的方法自动就会触发onload事件
        reader.readAsDataURL(event.data);
      };
      ws.onerror = function () {
        console.log("error...");
        ws_offline = true;
      }
      ws.onclose = function () {
        console.log("close...");
        ws_offline = true;
      }
    }
  }
}
</script>

<style scoped lang="less">
.camera {
  width: 100%;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
